﻿@page "/overflow"

<PageTitle>Blazor Content Overflow Utilities | Free UI Components by Radzen</PageTitle>
<HeadContent>
    <meta name="description" content="Overflow styles and utility CSS classes available in Radzen Blazor Components library.">
</HeadContent>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Overflow
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Overflow utility CSS classes can be used to control the overflow of content within elements.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo four cards demonstrate overflow classes: <code>rz-overflow-auto</code> (scrolls only when needed), <code>rz-overflow-scroll</code> (always shows scrollbars), <code>rz-overflow-hidden</code> (clips content), and <code>rz-overflow-visible</code> (content overflows the container), with responsive variants available like <code>rz-overflow-{breakpoint}-scroll</code>.
</RadzenText>

<RadzenExample Example="OverflowClasses">
    <OverflowClasses />
</RadzenExample>
<RadzenText TextStyle="TextStyle.Body1" class="rz-my-6">
    If you need to specify how the text content should wrap, use <code>rz-text-wrap</code>, <code>rz-text-nowrap</code>, and <code>rz-text-truncate</code>. See the <RadzenLink Text="Text Wrap demo" Path="/typography#text-wrap" />.
</RadzenText>

<RadzenText Anchor="spacing#responsive-spacing" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Responsive overflow
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-my-6">
    You can set a specific overflow value for different screen sizes by inserting the respective breakpoint abbreviation.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    For example <code>.rz-overflow-{breakpoint}-scroll</code>, where <code>{breakpoint}</code> can be <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xx</code>.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-my-6">
    Learn more about <RadzenLink Text="Breakpoints" Path="/breakpoints" />.
</RadzenText>